<?php include 'head.php';
$sorts = $DB->getAll("SELECT * FROM `sort`");
?>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加题目</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/component/pear/css/pear.css" />
</head>

<body class="pear-container">
    <div class="layui-card">
        <div class="layui-card-header">添加题目</div>
        <div class="layui-card-body">
            <form class="layui-form" action="" onsubmit="return false">
                <div class="layui-form-item">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-block">
                            <?php if (empty($sorts)) echo '<select name="sort" lay-verify="required" disabled><option value="none" selected>请在分类管理添加分类！</option>';
                            else if (!is_array($sorts)) echo '<select name="sort" lay-verify="required" disabled><option value="none" selected>' . $sorts . '</option>';
                            else {
                                echo'<select name="sort" lay-verify="required" lay-search>';
                                foreach ($sorts as $sort) {
                                    # 输出分类选项
                                    echo '<option value="' . $sort['id'] . '">' . $sort['name'] . '</option>';
                                }
                            } ?>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">题目</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required lay-verify="required" autocomplete="off" class="layui-input" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">选项A</label>
                    <div class="layui-input-block">
                        <input type="text" name="options1" required lay-verify="required" autocomplete="off" class="layui-input" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">选项B</label>
                    <div class="layui-input-block">
                        <input type="text" name="options2" required lay-verify="required" autocomplete="off" class="layui-input" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">选项C</label>
                    <div class="layui-input-block">
                        <input type="text" name="options3" required lay-verify="required" autocomplete="off" class="layui-input" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">选项D</label>
                    <div class="layui-input-block">
                        <input type="text" name="options4" required lay-verify="required" autocomplete="off" class="layui-input" value="">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">正确答案</label>
                    <div class="layui-input-block">
                        <input type="radio" name="answer" value="options1" title="A" checked>
                        <input type="radio" name="answer" value="options2" title="B">
                        <input type="radio" name="answer" value="options3" title="C">
                        <input type="radio" name="answer" value="options4" title="D">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">回答解析</label>
                    <div class="layui-input-block">
                        <textarea type="text" name="parse" required lay-verify="required" autocomplete="off" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="pear-btn pear-btn-primary" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-warning">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
<script src="/component/layui/layui.js"></script>

<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['form', 'layer', 'jquery', 'button', 'popup', 'loading'], function() {
        var $ = layui.jquery,
            form = layui.form,
            layer = layui.layer,
            button = layui.button,
            popup = layui.popup,
            loading = layui.loading;


        // 修改信息
        window.onkeypress = function(e) {
            if (e.keyCode == 13) {
                $('[lay-submit]').click();
            }
        }
        form.on('submit(formDemo)', function(data) {

            /// 验证
            console.log(data.field);

            /// 按钮加载动画
            var load = button.load({
                elem: '.pear-btn-primary'
            });
            /// 提交
            $.ajax({
                url: './ajax.php?act=addque',
                type: "POST",
                timeout: "5000",
                data: data.field,
                success: function(data) {
                    load.stop();
                    if (data.code == "200") {
                        popup.success(data.msg);
                    } else {
                        popup.failure(data.msg);
                    }
                },
                error: function(XMLResponse) {
                    load.stop();
                    popup.failure("提交异常");
                }
            });

            return false;
        });
    });
</script>

</html>